import React from 'react';
import {observer} from 'mobx-react';
import {Button} from 'antd';
import {Action, TableCard} from '@/components';
import store from './store';

export default observer(function () {
  const columns = [
    {
      title: 'No.',
      key: 'series',
      width: 50,
      render: (_, __, index) => <span className="idx">{index + 1}</span>
    }, {
      title: '商品名称',
      dataIndex: ['product', 'name'],
    }, {
      title: '商品编号',
      dataIndex: ['product', 'sn'],
    }, {
      title: '商品分类',
      dataIndex: ['product', 'category_names'],
      render: v => v?.join(' / ')
    }, {
      title: '规格',
      dataIndex: ['product', 'spec'],
    }, {
      title: '成本价',
      dataIndex: ['product', 'price'],
    }, {
      title: '库存',
      dataIndex: 'quantity',
    }, {
      title: '仓库全名',
      dataIndex: ['warehouse', 'name'],
    }, {
      title: '创建时间',
      dataIndex: 'created_at',
    }, {
      title: '操作',
      width: 120,
      render: info => (
        <Action>
          <Action.Button onClick={() => store.showLog(info)}>库存变动记录</Action.Button>
        </Action>
      )
    }
  ]

  return (
    <TableCard
      title={"商品库存列表"}
      rowKey="id"
      bordered
      loading={store.fetching}
      dataSource={store.dataSource}
      columns={columns}
      pagination={{
        showSizeChanger: true,
        showLessItems: true,
        hideOnSinglePage: true,
        pageSizeOptions: ['10', '20', '50', '100']
      }}
      onReload={store.fetchRecords}
      actions={[
        <Button type="primary" onClick={() => store.showForm()}>商品库存修改</Button>,
      ]}/>
  )
})
